import React, { useState, useReducer } from 'react';
import { Button } from 'antd';

export default function Hooks() {
  const [count, setCount] = useState(0);
  const [state, dispatch] = useReducer(reducer, 10);
  return (
    <div>
      <div>
        <Button onClick={() => setCount(count + 1)}>+</Button>
        useState
        <Button onClick={() => setCount(count - 1)}>-</Button>
      </div>
      <div>{count}</div>
      <div>
        <Button onClick={() => dispatch({ type: 'increment' })}>+</Button>
        useReducer
        <Button onClick={() => dispatch({ type: 'decrement' })}>-</Button>
      </div>
      <div>{state}</div>
    </div>
  );
}

function reducer(prevState: any, action: any) {
  if (action.type === 'increment') {
    return prevState + 1;
  }
  if (action.type === 'decrement') {
    return prevState - 1;
  }
  return prevState + 1;
}
